﻿import QtQuick 2.0
import "../components"
import QtCharts 2.3
import QtQuick.Layouts 1.1
import QtQuick.Controls.Styles 1.2
import QtQuick.Controls 2.12
import QtMultimedia 5.14

Rectangle {
    width: parent.width
    height: parent.height
    property int index: 1
    radius: 12

    // 添加index变化的处理函数
    onIndexChanged: {
        loadHtmlContent();
    }

    Rectangle{
        x:10*dp
        y:10*dp
        width: parent.width-20*dp
        height: parent.height-20*dp
        radius: 8
        border.color: "#B8B7B5"

        // 左侧导航菜单（保持不变）
        Rectangle{
            x:2*dp
            y:2*dp
            width: parent.width*0.2-4*dp
            height: parent.height-4*dp
            Column{
                anchors.fill: parent
                spacing: 10*dp

                // 导航项（保持不变）
                Rectangle{
                    width: parent.width
                    height: 30*dp
                    color: index===1?"#E6F0FF":"transparent"
                    Text{
                        anchors.fill: parent
                        text: "  软件信息与环境"
                        verticalAlignment: Text.AlignVCenter
                    }
                    MouseArea{
                        anchors.fill: parent
                        cursorShape: Qt.PointingHandCursor
                        onReleased: index=1
                    }
                }

                Rectangle{
                    width: parent.width
                    height: 30*dp
                    color: index===2?"#E6F0FF":"transparent"
                    Text{
                        anchors.fill: parent
                        text: "  名词解释"
                        verticalAlignment: Text.AlignVCenter
                    }
                    MouseArea{
                        anchors.fill: parent
                        cursorShape: Qt.PointingHandCursor
                        onReleased: index=2
                    }
                }

                Rectangle{
                    width: parent.width
                    height: 30*dp
                    color: index===3?"#E6F0FF":"transparent"
                    Text{
                        anchors.fill: parent
                        text: "  网络拓扑"
                        verticalAlignment: Text.AlignVCenter
                    }
                    MouseArea{
                        anchors.fill: parent
                        cursorShape: Qt.PointingHandCursor
                        onReleased: index=3
                    }
                }

                Rectangle{
                    width: parent.width
                    height: 30*dp
                    color: index===4?"#E6F0FF":"transparent"
                    Text{
                        anchors.fill: parent
                        text: "  软件密钥激活"
                        verticalAlignment: Text.AlignVCenter
                    }
                    MouseArea{
                        anchors.fill: parent
                        cursorShape: Qt.PointingHandCursor
                        onReleased: index=4
                    }
                }

                Rectangle{
                    width: parent.width
                    height: 30*dp
                    color: index===5?"#E6F0FF":"transparent"
                    Text{
                        anchors.fill: parent
                        text: "  安装与基础配置"
                        verticalAlignment: Text.AlignVCenter
                    }
                    MouseArea{
                        anchors.fill: parent
                        cursorShape: Qt.PointingHandCursor
                        onReleased: index=5
                    }
                }
            }
        }

        // 分隔线（保持不变）
        Rectangle{
            x:parent.width*0.2
            y:0*dp
            width: 1*dp
            height: parent.height
            color: "#B8B7B5"
        }

        // 右侧内容区域
        Rectangle{
            x:parent.width*0.2+20*dp
            y:20*dp
            width: parent.width*0.8-40*dp
            height: parent.height-40*dp

            Flickable {
                id: flickableContent
                x:10*dp
                y:0*dp
                width: parent.width
                height: parent.height
                clip: true

                contentWidth: parent.width
                contentHeight: textContent.height
                flickableDirection: Flickable.VerticalFlick

                Text {
                    id: textContent
                    textFormat: Text.RichText
                    wrapMode: Text.WordWrap
                    width: parent.width

                    Component.onCompleted: {
                        // 初始加载
                        loadHtmlContent();
                    }
                }
            }
        }
    }

    // 加载HTML内容的函数
    function loadHtmlContent() {
        var file = Qt.resolvedUrl("qrc:/help/help"+index+".html");
        var xhr = new XMLHttpRequest();
        xhr.open("GET", file, true);
        xhr.onreadystatechange = function () {
            if (xhr.readyState === XMLHttpRequest.DONE) {
                if (xhr.status === 200 || xhr.status === 0) { // 本地文件状态码为0
                    textContent.text = xhr.responseText;
                } else {
                    textContent.text = "无法加载帮助内容 (错误代码: " + xhr.status + ")";
                }
            }
        };
        xhr.send();
    }
}
